<template>
  <!--新闻中心-->
  <div
    class="pageBanner"
    :style="{ 'background': 'url(' +dataInfo.bannerUrl+ ')'}"
    style="background-size: 100% 100%;"
  >
    <div class="pageContainer text">
      <h1 v-if="dataInfo.titleBack">{{dataInfo.titleBack}}</h1>
      <div class="line"></div>
      <div class="name" v-if="dataInfo.title">{{dataInfo.title}}</div>
    </div>
  </div>

  <div class="boxWrap pageContainer">
    <div class="boxHeader">
      <div class="title">{{dataInfo.titleBack}}</div>
      <div class="tabNav">
        <div
          class="item"
          v-for="(item, index) in typeList"
          :class="{ 'active' : currentTab == index + 1 }"
          @click="tabClick(index + 1, item)">
          {{item}}
        </div>
      </div>
    </div>

    <div class="newList">
      <div class="item" v-for="(item, index) in dataList" @click="showDetail(item)">
        <div class="img">
          <img :src="item.backUrl">
        </div>
        <div class="text">
          <div class="title lineBreak1">{{item.title}}</div>
          <div class="desc lineBreak4">{{item.digest}}</div>
          <div class="bottom">
            <div>{{item.newsDate}}</div>
            <div>→</div>
          </div>
        </div>
      </div>

      <div class="pagination">
        <el-pagination
          v-model:current-page="pageParams.pageNum"
          v-model:page-size="pageParams.pageSize"
          background layout="prev, pager, next"
          @current-change="handleCurrentChange"
          :total="total"/>
      </div>
    </div>

  </div>
</template>

<script setup>
  import {ref, onMounted, computed} from 'vue'
  import {apiGetNewsInfo, apiGetNewsList} from '@/api/index.js'
  import {useRouter, useRoute} from 'vue-router'
  const router = useRouter()
  const route = useRoute()
  const currentTab = ref(route.query.tab || '1')

  const dataInfo = ref({})
  const dataList = ref([])
  const total = ref(0)
  import { UTILS_Tool } from '@/utils/index.js'
  const { routerLink } = UTILS_Tool()
  const typeList = ref([])

  import {useLocaleStore} from '../../store/locales.js'
  const curLocale = computed(() => {		// 定义计算属性
    const useLocale = useLocaleStore()
    return useLocale.locale
  })

  const pageParams = ref({
    "category": "",
    "pageNum": 1,
    "pageSize": 10
  })


  onMounted(() => {
    apiGetNewsInfo({}).then((res) => {
      dataInfo.value = res
      typeList.value = res.category.split('，')
      pageParams.value.category = typeList.value[currentTab.value -1]
      getList()
    })
  })

  const showDetail = (item) => {
    routerLink('/detail', {id: item.id})
  }

  const handleCurrentChange = (val) => {
    pageParams.value.pageNum = val
    getList()
  }

  const getList = () => {

    console.log(currentTab.value, 'eee')
    apiGetNewsList(pageParams.value).then((res) => {
      dataList.value = res.data
      total.value = res.count
    })
  }

  const tabClick = (tab, type) => {
    currentTab.value = tab
    pageParams.value.category = type
    getList()
  }
</script>

<style scoped lang="scss">


  @media screen and (max-width: 1079px) {
    .boxWrap {
      margin: 10px auto 0;
      .boxHeader {
        padding-bottom: 10px;
        width: 100%;
        justify-content: space-between;
        .title {
          height: 26px;
          font-size: 16px; margin-top: 15px;
          line-height: 26px;
          color: #1A1A25; font-weight: bold;
        }
        .tabNav {
          display: flex; padding-top: 5px;
          flex-wrap: wrap;
          gap: 10px;
          .item {
            height: 26px;
            border: 1px solid #e8e8e8;
            text-align: center; padding: 0 10px;
            font-size: 12px;
            line-height: 26px;
            box-sizing: content-box;
            color: #69696F;
            cursor: pointer;
            &.active {
              background-color: #1027EF;
              border: 0;
              color: #fff;
            }
          }
        }
      }

      .newList {
        flex-wrap: wrap;

        .item {
          width: 100%;

          border: 1px solid #e8e8e8;
          padding: 10px;
          display: flex;
          margin-bottom: 10px;

          .img {
            width: 100px; height: 100px;
            img {
              width: 100px; height: 100px; display: block;
            }
          }
          .text {
            flex: 1;
            padding-left: 10px;
            .title {
              font-size: 14px;
              font-weight: 600;
            }
            .desc {
              font-size: 14px;
              color: #69696F;
              padding-top: 10px;
              line-height: 20px; height: 50px;
            }
            .bottom {
              display: flex; font-size: 14px;
              justify-content: space-between;
              padding-top: 10px;
              color: #69696F;
            }
          }
        }
      }
      .showMore {
        text-align: center;
        font-size: 0.8vw;
        color: #1A1A25;
        cursor: pointer;
      }
    }

    .pagination {
      text-align: center;
      padding: 2vw 0 4vw;
      .el-pagination {
        display: flex;
        justify-content: center;
      }
    }
  }

  @media screen and (min-width: 1080px) {

    .boxWrap {

      margin: 2vw auto 0;

      .boxHeader {
        display: flex;
        width: 100%;
        justify-content: space-between;
        .title {
          height: 6vw;
          font-size: 1.8vw;
          line-height: 6vw; font-weight: bold;
          color: #1A1A25;
        }
        .tabNav {
          display: flex;
          justify-content: flex-end;
          gap: 1vw;
          padding-top: 2vw;
          .item {
            width: auto;
            height: 2.2vw; padding: 0 1.8vw;
            border: 1px solid #e8e8e8;
            text-align: center;
            font-size: 0.8vw;
            line-height: 2.2vw;
            box-sizing: content-box;
            color: #69696F;
            cursor: pointer;
            &.active {
              background-color: #1027EF;
              color: #fff;
              border: 0;
            }
          }
        }
      }

      .newList {
        flex-wrap: wrap;

        .item {
          width: 100%;  cursor: pointer;
          border: 1px solid #e8e8e8;
          padding: 1vw;
          display: flex;
          margin-bottom: 1.5vw;
          .img {
            width: 10.6vw;
            height: auto;
            img {
              width: 100%;
              height: 10.6vw;
            }
          }
          .text {
            flex: 1;
            padding-left: 1.5vw;
            .title {
              font-size: 1vw;
              font-weight: 600;
            }
            .desc {
              font-size: 0.9vw;
              color: #1A1A25;
              height: 6.8vw; overflow: hidden;
              line-height: 1.5vw; padding-top: 0.9vw;
            }
            .bottom {
              display: flex; font-size: 0.9vw;
              justify-content: space-between;
              padding-top: 0.8vw;
              color: #69696F;
            }
          }
        }
      }
      .showMore {
        text-align: center;
        font-size: 0.8vw;
        color: #1A1A25;
        cursor: pointer;
      }
    }

    .pagination {
      text-align: center;
      padding: 2vw 0 4vw;
      .el-pagination {
        display: flex;
        justify-content: center;
      }
    }
  }
</style>
